<template>
  <div id="phone-demo" class="phone-demo">
    <div id="demo-header" class="demo-header">
      <!-- ng-mousedown="headerMousedown($event)"
      ng-mousemove="headerMousemove($event)"
      ng-mouseup="headerMouseup($event)"-->
      <span>云机ID：{{phone.name}}</span>
      <span class="red">{{phone.type}}</span>
      <i class="icon phone-close" @click="close()"></i>
    </div>
    <div class="demo-body"></div>
    <div class="demo-footer"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    console.log(this.phone);
  },
  mounted() {
    //拖拽
    function dragFunc(drag, dragContainer) {
      var Drag = document.getElementById(drag);
      var DragContainer = document.getElementById(dragContainer);
      Drag.onmousedown = function(event) {
        var ev = event || window.event;
        event.stopPropagation();
        var disX = ev.clientX - DragContainer.offsetLeft;
        var disY = ev.clientY - DragContainer.offsetTop;
        document.onmousemove = function(event) {
          var ev = event || window.event;
          DragContainer.style.left = ev.clientX - disX + "px";
          DragContainer.style.top = ev.clientY - disY + "px";
          // Drag.style.cursor = "move";
        };
      };
      Drag.onmouseup = function() {
        document.onmousemove = null;
        // this.style.cursor = "default";
      };
    }
    dragFunc("demo-header", "phone-demo");
  },
  methods: {
    close() {
      this.$store.commit("setDialogStatus", {
        dialog: "phoneDialog",
        isBoolean: false
      });
    }
  },
  computed: {
    phone() {
      return this.$store.state.phone;
    }
  }
};
</script>

<style lang="scss" scoped>
$white-light: #f5f5f5;
$gray-light: #bcbcbc;
.phone-demo {
  position: fixed;
  width: 288px;
  height: 580px;
  top: calc(50% - 290px);
  left: calc(50% - 144px);
  z-index: 999;
  box-sizing: border-box;
  border: 1px solid $white-light;
  box-shadow: 0px 0px 10px $gray-light;
  background: blue;
}
.demo-header {
  cursor: move;
  height: 36px;
  line-height: 36px;
  font-size: 13px;
  background-color: $white-light;
  padding-left: 10px;
  .red {
    margin-left: 10px;
  }
}
.phone-close {
  position: absolute;
  cursor: pointer;
  right: 5px;
  &:before {
    content: "\e656";
    font-size: 16px;
  }
  &:hover {
    color: red;
  }
}
</style>